<template>
	<view class="myPoints">
		<view class="myPoints_bg">
			<view class="nav"></view>
			<view class="slip-title">
				<view class="img">
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/tTBvsOxInE_goto_icon_white.png" mode="" @click="previous"></image>
				</view>
				<view class="txt">我的积分</view>
			</view>
			<view class="amount">{{totalPoints || 0}}</view>
			<view class="freezeorno_box">
				<view class="nofre_left">
					<view class="txt">可用积分</view>
					<view class="num">{{points || 0}}</view>
				</view>
				<view class="freezeorno_border"></view>
				<view class="fre_right">
					<view class="txt">排位锁定</view>
					<view class="num">{{frozePoints || 0}}</view>
				</view>
			</view>
		</view>
<!-- 		<view class="points_details_box my-mgt-10">
			<view class="points_details">
				<view class="points_details_img">
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/rVqCgYNiPO_integralshopping_icon.png" mode=""></image>
				</view>
				<view class="points_details_tlt">
					<view class="points_details_tlt_top">积分购物</view>
					<view class="points_details_tlt_buttom">轻松玩赚积分</view>
				</view>
			</view>
			<view class="points_details">
				<view class="points_details_img">
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/eYazhagmlJ_pointsfor_icon.png" mode=""></image>
				</view>
				<view class="points_details_tlt" @click="goPoints">
					<view class="points_details_tlt_top">积分兑换</view>
					<view class="points_details_tlt_buttom">小积分，大礼品</view>
				</view>
			</view>
		</view> -->
		<view class="Integral_record my-mgt-10">
			<view class="Integral_record_tlt">
				<view class="Integral_record_tlt_left">
					<text class="bg_red"></text>
					<text class="bg_txt">积分记录</text>
				</view>
				<view class="Integral_record_tlt_right">
					<picker mode="date" fields="month" @change="onEnd">
						<view class="date">
							<text class="my-mgr-10">{{endDate}}</text>
							<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/YkfcSbcZVf_top_select.png" style="width: 20rpx;height: 20rpx;"></image>
						</view>
					</picker>
				</view>
			</view>
			<view class="tab-box my-mgt-20 my-pdlr-30">
				<view class="tabBtn" v-for="(item,index) in tabList" :key="index" @click="tabBtn(item.type)">
					<view class="name" :class="currType==item.type?'txt-col':''">{{item.name}}</view>
					<view :class="currType==item.type?'active':''"></view>
				</view>
			</view>
			<view class="" v-if="dev.length > 0">
				<view class="detlias_list" v-for="(item,index) in dev" :key="index">
					<view class="detlias_list_txt my-pdl-15">
						<view class="txt">
							<text class="my-mgr-15">{{item.pointSourceType}}</text>
							<image :src="theFreezeIcon" mode="" style="width: 100rpx;height: 36rpx;" v-show="item.froze"></image>
						</view>
						<view class="time">{{item.createDate}}</view>
					</view>
					<view class="detlias_list_num num_red num_black my-pdl-10">{{item.points|| 0}}</view>
				</view>
			</view>
			<view style="width: 100%;height: 300rpx;line-height: 300rpx;text-align: center;" v-else>暂无数据</view>
		</view>
	</view>
</template>

<script>
	import {pointslistApi,getpointsInfoApi} from "@/api/home.js"
	export default {
		data() {
			return {
				endDate:null,
				tabList: [{name:'冻结',type:'ALL'},{name:'获取',type:'POINTS_GET'},{name:'使用',type:'POINTS_USE'}],
				currType: 'ALL',//ALL(全部) POINTS_GET("积分获取"), POINTS_USE("积分使用")
				theFreezeIcon:'../../static/img/theFreeze_icon.png',
				frozePoints:0,//冻结积分
				points:0,//积分
				totalPoints:0,//总和积分
				pageIndex:0,
				pageSize:30,
				dev:[],
				total:1,
			};
		},
		onLoad() {
			this.getDate()
			this.getPointsData()
			this.getPointsList()
		},
		// 上拉加载更多
		onReachBottom() {
			this.getPointsList()
		},
		methods: {
			// 获取列表
			async getPointsList(){
				if(this.dev.length >= this.total) return
				let params ={
					pageIndex:this.pageIndex,
					pageSize:this.pageSize,
					pointsStatus:this.currType,
					pointsTime:this.endDate
				}
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await pointslistApi(params)
				if(res.statusCode === 200){
					uni.hideLoading()
					this.dev = [...this.dev,...res.data.data.rows]
					this.total = res.data.data.rows
					this.pageIndex++
				}
			},
			// 获取积分数据
			async getPointsData(){
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await getpointsInfoApi({})
				if(res.statusCode === 200){
					uni.hideLoading()
					this.frozePoints = res.data.data.frozePoints
					this.points = res.data.data.points
					this.totalPoints = res.data.data.frozePoints + res.data.data.points - 0
				}
			},
			// 返回上一页
			previous() {
				uni.switchTab({
					url:"/pages/main/homePages"
				})
			},
			// 积分兑换页面
			goPoints(){
				let nopoints = this.points
				let yespoints = this.frozePoints
				uni.navigateTo({
					url: `/pages/main/childPages/pointsFor?points=${nopoints}&frozePoints=${yespoints}`
				})
			},
			// 获取选中时间
			onEnd(e) {
				this.endDate = e.target.value
				this.restData()
			},
			getDate() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				month = month > 9 ? month : '0' + month;
				this.endDate = `${year}-${month}`;
			},
			// tab切换
			tabBtn(item) {
				this.currType = item
				this.restData()
			},
			restData(){
				this.dev = []
				this.pageIndex = 0
				this.total = 1
				this.getPointsList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myPoints {
		width: 100%;
		// height: 100vh;
		background: #FAFAFA;

		.myPoints_bg {
			width: 100%;
			height: 442rpx;
			background: url(https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/356248.png);
.nav{
					height: var(--status-bar-height);
				}
			.slip-title {
				width: 100%;
				height: 150rpx;
				display: flex;
				padding-top: 70rpx;

				.img {
					width: 15%;
					height: 100%;
					padding-top: 13rpx;
					z-index: 9999;

					image {
						width: 38rpx;
						height: 38rpx;
						padding-left: 29rpx;
					}
				}

				.txt {
					width: 70%;
					height: 100%;
					text-align: center;
					font-size: 37rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.amount {
				width: 100%;
				height: 150rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 60rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			.freezeorno_box {
				width: 100%;
				height: 140rpx;
				display: flex;
				align-items: center;

				.freezeorno_border {
					width: 2rpx;
					height: 48rpx;
					background: #FFFFFF;
				}

				.nofre_left {
					width: 50%;
				}

				.fre_right {
					width: 49%;
				}

				.nofre_left,
				.fre_right {
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;

					.txt {
						height: 40%;
						font-size: 30rpx;
					}

					.num {
						height: 50%;
						font-size: 36rpx;
						line-height: 40rpx;
					}

					.txt,
					.num {
						width: 100%;
						text-align: center;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
		}

		.points_details_box {
			width: 100%;
			height: 140rpx;
			display: flex;
			align-items: center;
			background: #FFFFFF;

			.points_details {
				width: 47%;
				height: 100%;
				display: flex;
				align-items: center;

				.points_details_img {
					width: 81rpx;
					height: 80rpx;
					margin: 30rpx 30rpx 30rpx 60rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.points_details_tlt {
					width: 170rpx;
					height: 100%;

					.points_details_tlt_top,
					.points_details_tlt_buttom {
						width: 100%;
						height: 50%;
					}

					.points_details_tlt_top {
						line-height: 80rpx;
						font-size: 34rpx;
						font-weight: 500;
						color: #000000;
					}

					.points_details_tlt_buttom {
						line-height: 60rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #999999;
					}
				}
			}
		}

		.Integral_record {
			width: 100%;
			min-height: 712rpx;
			height: auto;
			background: #FFFFFF;

			.Integral_record_tlt {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;

				.Integral_record_tlt_left {
					width: 50%;
					height: 100%;
					display: flex;
					align-items: center;

					.bg_red {
						display: block;
						width: 10rpx;
						height: 30rpx;
						background: #F05329;
						margin: 0rpx 15rpx 0rpx 30rpx;
					}

					.bg_txt {
						display: block;
						width: 150rpx;
						height: 100%;
						font-size: 34rpx;
						font-weight: 500;
						color: #333333;
						line-height: 95rpx;
					}
				}

				.Integral_record_tlt_right {
					width: 50%;
					height: 100%;
					.date{
						width: 100%;
						height: 100%;
						text-align: right;
						line-height: 100rpx;
						padding-right:30rpx ;
					}
				}
			}
			.tab-box {
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #F2F2F2;
				.tabBtn {
					width: 50%;
					height: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
			
					.name {
						width: 100%;
						height: 90%;
						text-align: center;
						font-size: 30rpx;
						font-weight: 400;
						color: #333333;
					}
					.txt-col{
						color: #F05329;
					}
					.active {
						width: 70rpx;
						height: 6rpx;
						background: #F05329;
					}
				}
			}
			.detlias_list{
				width: 100%;
				height: 150rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #F2F2F2;
				.detlias_list_txt{
					width: 70%;
					height: 100%;
					.txt,.time{
						width: 100%;
						height: 50%;
						
					}
					.txt{
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
						display: flex;
						align-items: center;
						padding-top: 20rpx;
					}
					.time{
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 55rpx;
					}
				}
				.detlias_list_num{
					width: 30%;
					height: 100%;
					font-size: 36rpx;
					font-weight: bold;
					text-align: center;
					line-height: 150rpx;
				}
				.num_red{
					color: #F05329;
				}
				.num_black{
					color: #000000;
				}
			}
		}
	}
</style>
